<template>
    <component :is="com" v-if="com" :prop="data"></component>
</template>

<script type="text/ecmascript-6">

    export default {
        data: function () {
            return {com: "", data: {id: 1, name: "OK", height: 30}, info: {id: 3}}
        },
        mounted() {
            this.$http.get(location.origin + "/dev/test.txt").then(res => {
                var html = res.data;
                var div = document.createElement("div");
                div.innerHTML = html;


                var name = 'test'

                var nodes = Array.from(div.children)
                var template = nodes.filter(it => it.nodeName == "TEMPLATE")[0].innerHTML
                var scriptJson = (nodes.filter(it => it.nodeName == "SCRIPT")[0] || "").innerHTML.trim().replace("export default", "")
                var style = (nodes.filter(it => it.nodeName == "STYLE")[0] || "").innerHTML

                scriptJson = eval("(" + scriptJson + ")")
                style = style.replace(/>>>/g, " ")

                this.load(name, template, scriptJson, style)

                this.com = name;
            })
        },

        methods: {
            loadStyle(style) {
                var fileref = document.createElement("style");
                document.head.appendChild(fileref);
                fileref.setAttribute("type", "text/css");

                if (fileref.styleSheet) {
                    fileref.styleSheet.cssText = style;
                } else {
                    fileref.innerHTML = style;
                }
            },
            load(name, html, scriptJson, style) {
                this.loadStyle(style);
                //注册
                var node = Vue.component(name, Object.assign({

                        template: html
                    }, scriptJson)
                );

                return node;
            }
        }
    }
</script>